<!DOCTYPE html> 
<html>
  <head>
    <title>Beer</title>
    <meta name="description" content="Beer Expert for Google I/O 2012 Demo">
    <meta name="author" content="Ido Green">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <link rel="stylesheet" href="style/beer.css"/>

    <!-- maximum scale added to stop zoom on select controls -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
  <!-- TODO move it down to the end of the page -->
    
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

    <script src="js/vendor/underscore.js"></script>    
    <script src="js/vendor/backbone.js"></script>
    <script src="js/vendor/formparams.js"></script>
    
    <!-- App specific scripts -->
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCcCjTBro5c0d5g3NBXJRWX6opJZtkZ0f0&sensor=true"></script>
    <script src="js/map.js"></script>
    <script src="js/app.js"></script>
    
    <!-- templates -->
    <script type="text/template" id="drink-list-item-template">    
      <li><a href="#drink-details" identifier="<%= id %>"><%= displayDate %> - <%= type %></a></li>
    </script>
    
    <script type="text/template" id="drink-details-template">
        <h3><%= type %></h3>
        <ul data-role="listview" id="drink-fields" data-inset="true">
          <li>Date: <%= displayDate %></li>
          <li>Score: <%= score %></li>
          <li>Price: <%= price %></li>
          <li>Comments: <%= comments %></li>
          <li>Your Location: <%= geoLocation %></li>
        </ul>
    </script>
    
    <script type="text/template" id="drink-form-template">
        <label for="date" class="select">Date</label>
        <% if (navigator.userAgent.indexOf('iPhone') >= 0 || navigator.userAgent.indexOf('iPad') >= 0) { %>
            <input type="date" name="date" id="date" placeholder="Date" value="<%= dateInputType %>" />
        <% }else{ %>
            <input type="date" name="date" id="date" placeholder="Date" value="<%= displayDate %>" />
        <% } %>
        
        <label for="type" class="select">Type</label>
        <select name="type" id="type">
            <option>Brown Ale</option>
            <option>Mild Ale</option>
            <option>Old Ale</option>
            <option>Pale Ale</option>
            <option>Stout</option>
            <option>Wheat beer</option>
        </select>
        
        <label for="price">Price</label>
        <input type="text" name="price" id="price" placeholder="" value="<%= price %>" />
    
        <label for="score">Score</label>
        <input type="text" name="score" id="score" placeholder="" value="<%= score %>" />
        
        <label for="geo">your location</label>
        <input type="text" name="geo" id="geoLocation" value="<%= geoLocation %>" />

        <div data-role="fieldcontain">
            <textarea name="comments" id="comments" placeholder="Comments"><%= comments %></textarea>
        </div>

    </script>
  </head>
  <body>

    <!-- The main page of our app -->
    <div data-role="page" id="drinks" data-theme="b">
      <div data-role="header" data-theme="b">
     
        
        
        <h1>Beers</h1>
        <a href="#drink-form" data-role="button" data-icon="add" id="add-button" class="ui-btn-right">Add</a>
      </div>
      <div data-role="content">
          <!-- the contents of the list view will be rendered via the backbone view -->
      </div>

      <div data-role="footer">    
        <div data-role="navbar" data-iconpos="bottom" data-position="fixed">
          <ul>
            <li><a href="search.html" data-icon="plus" data-rel="dialog" data-transition="slidedown">Get New Beers</a></li>
            <li><a href="map.html"  data-icon="search">Breweries Around</a></li>
            <li><a href="#options" data-icon="grid" data-rel="dialog" data-transition="slidedown">Options</a></li>
          </ul>
        </div><!-- /navbar -->
      </div><!-- /footer -->
      
    </div>
    
    <div data-role="page" id="drink-details" data-add-back-btn="true">
      <div data-role="header" data-theme="b">
        <a href="#drink-form" data-role="button" data-icon="arrow-d" id="edit-drink-button" class="ui-btn-right">Edit</a>
        <h1>Drink Details</h1>
      </div>
      <div data-role="content" id="drink-details-content">
          <!-- the contents of the list view will be rendered via the backbone view -->
      </div>
    </div>
    
    <div data-role="page" id="drink-form" data-add-back-btn="true">
      <div data-role="header" data-theme="b">
        <a href="#" data-role="button" data-icon="check" data-theme="b" data-rel="back" id="save-drink-button" class="ui-btn-right">Save</a>
        <h1>New drink</h1>
      </div>
      <div data-role="content" id="drink-form-content">
          <!-- the contents of the form will be rendered via the backbone view -->
          <form id="drink-form-form" action="#"></form>
      </div>
    </div>

    <div data-role="page" id="options" data-add-back-btn="true">
       <div data-role="header" data-theme="b">
        
        <h1>Options & Sources</h1>
      </div>
      <div data-role="content" id="drink-form-content">
        TODO
    </div>
    
  </body>
</html>
